<script setup lang="ts" name="ContentWrap">
import { propTypes } from '@/utils/propTypes'

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('content-wrap')

defineProps({
  title: propTypes.string.def(''),
  message: propTypes.string.def(''),
  bodyStyle: propTypes.object.def({ padding: '20px' })
})
</script>

<template>
  <ElCard :body-style="bodyStyle" :class="prefixCls" shadow="never">
    <template v-if="title" #header>
      <div class="flex items-center">
        <span class="text-16px font-700">{{ title }}</span>
        <ElTooltip v-if="message" effect="dark" placement="right">
          <template #content>
            <div class="max-w-200px">{{ message }}</div>
          </template>
          <SvgIcon :size="14" class="ml-5px" icon="ep:question-filled" />
        </ElTooltip>
        <div class="flex flex-grow pl-20px">
          <slot name="header" />
        </div>
      </div>
    </template>
    <slot />
  </ElCard>
</template>

<style scoped lang="scss">
$prefix-cls: #{$namespace}-content-wrap;

.#{$prefix-cls} {
  display: flex;
  background: transparent;
  border: none;
  border-radius: 0;
  flex: 1;
  flex-direction: column;

  :deep(.el-card__body) {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
  }
}
</style>
